/*
    =======================================================================================================

    Name          : Custom colorbox style
    File          : colorbox.css

    =======================================================================================================
*/




/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/*
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/

#colorbox:focus {
  outline: 0;

}

#cboxContent{background:#fff;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0px; background:url(images/controls.png) -16px -15px no-repeat; width:50px; height:50px; text-indent:-9999px;}
#cboxPrevious.hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) -9px -65px no-repeat; width:50px; height:50px; text-indent:-9999px;}
#cboxNext.hover{background-position:-50px -25px;}

#cboxLoadingGraphic{background:url("@{td_css_path}images/colorbox/loading.gif") center center no-repeat;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
#cboxClose.hover{background-position:-25px -25px;}




/*  ----------------------------------------------------------------------------
    Gallery popup
*/


#cboxLoadedContent{
  overflow: hidden !important;
}


#cboxOverlay {
  background: @td_background_black;
  //background: url('@{td_css_path}images/colorbox/bg.png') repeat #888888 !important;
}

#cboxBottomRight,  #cboxBottomCenter, #cboxBottomLeft, #cboxMiddleLeft, #cboxMiddleRight, #cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxCurrent{
  display: none !important;
}


#cboxNext {
  position: absolute;
  bottom:10px;
  left:auto !important;
  right: 10px;
  //background:url('@{td_css_path}images/colorbox/arrow-next.png') no-repeat transparent;
  width:38px;
  height:38px;
  border: none;



}

#cboxPrevious {
  position: absolute;
  bottom:10px;
  left:auto !important;
  right: 48px;
  //background:url('@{td_css_path}images/colorbox/arrow-back.png') no-repeat transparent;
  width:38px;
  height:38px;
  border: none;
}

#cboxClose {
  position: absolute;
  top:10px;
  right:10px;
  background: url('@{td_css_path}images/colorbox/gallery-close.png') no-repeat transparent;
  width: 38px;
  height: 38px;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  border-style:none;
}

#cboxClose.hover, #cboxPrevious.hover {
  opacity: 0.8;
}
#cboxNext.hover {
  opacity: 0.8;
}

#cboxWrapper {
  //margin-left: 20px;
}

#cboxContent {
  margin: 10px;

  -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75) !important;
  -moz-box-shadow:    0px 0px 10px rgba(50, 50, 50, 0.75) !important;
  box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.75) !important;
}


#cboxLoadedContent {
  margin-bottom: 0px;
}

#cboxTitle {
  display: none !important;
}